<template>
  <div class="box">
    <div class="search">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="input" placeholder="请输入id" />
        </el-col>
        <el-col :span="4">
          <el-button type="primary">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="userName" label="用户名" width="180" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column label="操作" min-width="120">
          <template v-slot="scope">
            <el-button type="primary" :icon="Edit" circle @click="edit(scope.row)" />
            <el-button type="danger" :icon="Delete" circle @click="del(scope.row.id)" />
            <el-button type="warning" circle>
              <el-icon>
                <View />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.rows"
      :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" style="margin-top: 20px;" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { list } from '../api/list1'
import { Delete, Edit } from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'
const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)
const tableData: any = ref([])
const pageParams = reactive({
  page: 1,
  rows: 10
})
const total = ref(0)
onMounted(() => {
  getList()
})
// 列表
function getList() {
  list(pageParams).then(res => {
    console.log(res);
    tableData.value = res.data.list
    total.value = res.data.count
  })
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  pageParams.page = 1
  pageParams.rows = val
  getList()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  pageParams.page = val
  getList()
}
</script>

<style scoped>
.box {
  padding: 20px;
}

.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>